<template>
  <div class="image-test-page p-8 bg-gray-100 min-h-screen">
    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-8 tracking-tight animate-fade-in-up">图片加载测试页面</h1>
    
    <!-- 方法1：使用import导入 -->
    <div class="mb-12">
      <h2 class="text-2xl font-semibold mb-4 border-b pb-2">方法1：使用import导入</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">1.png</h3>
          <div class="border-2 border-red-500 p-2 h-40 flex items-center justify-center">
            <img :src="img1" alt="图片1" class="max-w-full max-h-full object-contain">
          </div>
          <p class="mt-2 text-sm text-gray-600">{{ typeof img1 }}</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">2.jpg</h3>
          <div class="border-2 border-red-500 p-2 h-40 flex items-center justify-center">
            <img :src="img2" alt="图片2" class="max-w-full max-h-full object-contain">
          </div>
          <p class="mt-2 text-sm text-gray-600">{{ typeof img2 }}</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">3.jpg</h3>
          <div class="border-2 border-red-500 p-2 h-40 flex items-center justify-center">
            <img :src="img3" alt="图片3" class="max-w-full max-h-full object-contain">
          </div>
          <p class="mt-2 text-sm text-gray-600">{{ typeof img3 }}</p>
        </div>
      </div>
    </div>
    
    <!-- 方法2：使用绝对路径 -->
    <div class="mb-12">
      <h2 class="text-2xl font-semibold mb-4 border-b pb-2">方法2：使用绝对路径</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">/src/assets/img/1.png</h3>
          <div class="border-2 border-blue-500 p-2 h-40 flex items-center justify-center">
            <img src="/src/assets/img/1.png" alt="图片1-绝对路径" class="max-w-full max-h-full object-contain">
          </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">/src/assets/img/2.jpg</h3>
          <div class="border-2 border-blue-500 p-2 h-40 flex items-center justify-center">
            <img src="/src/assets/img/2.jpg" alt="图片2-绝对路径" class="max-w-full max-h-full object-contain">
          </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">/src/assets/img/3.jpg</h3>
          <div class="border-2 border-blue-500 p-2 h-40 flex items-center justify-center">
            <img src="/src/assets/img/3.jpg" alt="图片3-绝对路径" class="max-w-full max-h-full object-contain">
          </div>
        </div>
      </div>
    </div>
    
    <!-- 方法3：使用别名路径 -->
    <div class="mb-12">
      <h2 class="text-2xl font-semibold mb-4 border-b pb-2">方法3：使用别名路径</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">@/assets/img/1.png</h3>
          <div class="border-2 border-green-500 p-2 h-40 flex items-center justify-center">
            <img src="@/assets/img/1.png" alt="图片1-别名路径" class="max-w-full max-h-full object-contain">
          </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">@/assets/img/2.jpg</h3>
          <div class="border-2 border-green-500 p-2 h-40 flex items-center justify-center">
            <img src="@/assets/img/2.jpg" alt="图片2-别名路径" class="max-w-full max-h-full object-contain">
          </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
          <h3 class="text-lg font-medium mb-2">@/assets/img/3.jpg</h3>
          <div class="border-2 border-green-500 p-2 h-40 flex items-center justify-center">
            <img src="@/assets/img/3.jpg" alt="图片3-别名路径" class="max-w-full max-h-full object-contain">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入图片
import img1 from '../assets/img/1.png'
import img2 from '../assets/img/2.jpg'
import img3 from '../assets/img/3.jpg'

console.log('导入的图片1:', img1)
console.log('导入的图片2:', img2)
console.log('导入的图片3:', img3)
</script>

<style scoped>
.image-test-page {
  font-family: Arial, sans-serif;
}
</style>